<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
        <div class="box">
                <p>
                    <label for="">用户名</label>
                    <input type="text" id="userName">
                    <span id=user_span></span>
                </p>
                <p>
                    <label for="">密&emsp;码</label>
                    <input type="text" id="pwd">
                    <span id="pwd_span"></span>
                </p>
                <p>
                    <label for="">验证码</label>
                    <input type="text" id="code" style="vertical-align:top;">
                    <span id="code-create"></span>
                    <span id="code_span" style="font-size: 12px"></span>
                </p>
                <P>
                    <input id="btn" type="button" value="登录">
                </P>
            </div>
            <script>
            var userName = document.getElementById("userName"),
            user_span = document.getElementById("user_span"),
            pwd = document.getElementById("pwd"),
            pwd_span = document.getElementById("pwd_span"),
            code = document.getElementById("code"),
            code_create = document.getElementById("code-create");
            code_span = document.getElementById("code_span"),
            btn = document.getElementById("btn");

            // 生成验证码
            var list=[]
            for(var i=97;i<=122;i++){
                 list.push(String.fromCharCode(i))
            }
            for(var i=65;i<=90;i++){
                list.push(String.fromCharCode(i))
            }
            console.log(list)
            var str=""
            for(var i=0;i<4;i++){
                str=str+list[Math.floor(Math.random()*52)]
            }  
            code_create.innerHTML=str

            // [/u4e00-u9fa5]   0-127
            // 用户名不能为空  账号需要在6-12位之间  由数字，字母(大小写)，下划线,$ 组成,
            // 且不能以数字开头
             var userReg=/^[a-zA-Z$][\w$]{5,11}$/ig
            // 密码  需要在 6-12为之间  不能含有特殊字母
            //  密码强中弱        弱（11111||aaaaa||AAAAAA）   中（111aaa）   强（111AAAaaa!!!）

            // 验证码  随机数字，字母(大小写)  4位的

            userName.onblur=function(){
            if(userName.value!=""){
                 if(userReg.test(userName.value)){
                    user_span.innerHTML="√"
                    user_span.style.color="green"
                    user_span.style.fontSize=12+"px"
                 }
                 else{
                    user_span.innerHTML="输入字符有误"
                    user_span.style.color="red"
                    user_span.style.fontSize=12+"px"
                 }
            }
            else{
                user_span.innerHTML="用户名不能为空"
                user_span.style.color="red"
                user_span.style.fontSize=12+"px"
            }
            }
            pwd.onblur=function(){
            if(pwd.value!=""){

            }
            else{
                pwd_span.innerHTML="密码不能为空"
                pwd_span.style.color="red"
                pwd_span.style.fontSize=12+"px"
            }
        }
            </script>
</body>
</html>